<script setup lang="ts">

import VideoPreview from "~/components/video/VideoPreview.vue";

interface Props {
  data?: any
  srcLabel?: string
  avatarLabel?: string
  usernameLabel?: string
}

const props = withDefaults(defineProps<Props>(), {
  srcLabel: 'src',
  avatarLabel: 'avatar_url',
  usernameLabel: 'username'
})

const isVideo = (src: string) => {
  return src?.includes('.mp4')
}

const { mdAndUp, } = useDisplay()

const defaultAvatar = 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/assets/default_avatar.png'

</script>
<template>
  <div>
    <v-hover v-slot="{ isHovering, props }">
      <v-card
          class="mx-auto ma-0 pa-0 cursor-pointer"
          :class="mdAndUp?'rounded-lg':'rounded'"
          color="grey-lighten-4"
          v-bind="props"
          @click="navigateTo(`/draw/${data['name']}/${data['user']['_id']}`)">
        <div v-if="isVideo(data[srcLabel])">
          <video autoplay loop muted playsinline webkit-playsinline
                 :style="isHovering ? 'transform: scale(1.05);' : 'transform: scale(1);'"
                 style="transition: transform 0.3s ease-in-out;">
            <source :src="data[srcLabel]" type="video/mp4">
            Your browser does not support the video tag.
          </video>
          <v-expand-transition>
            <div
                class="transition-fast-in-fast-out bg-white-darken-2 v-card--reveal"
                :class="mdAndUp?'rounded-lg':'rounded'"
                style="z-index: 999;transition: all 0.2s ease-in-out;"
                :style="isHovering ? 'height: 40%' : 'height: 25%'"
            >
              <!--              应用标题-->
              <v-sheet color="transparent">
                <span class="text-caption text-white font-weight-bold  text-left ma-4">{{ data["title"] }}</span>
                <v-divider/>
                <span class="text-caption font-weight-light text-white  text-left ma-4 overflow-hidden">{{ data["description"] }}</span>
                <v-spacer/>
              </v-sheet>
              <v-sheet class="d-flex flex-row justify-space-start align-center" color="transparent"
                       style="width: 100%;">
                <!--              头像-->
                <v-avatar
                    color="white"
                    class="mb-2 ml-4 mt-2"
                    size="30"
                >
                  <v-img :src="data['user'][avatarLabel] || defaultAvatar"></v-img>
                </v-avatar>
                <!--              姓名-->
                <span class="text-caption text-grey font-weight-bold ml-2">{{ data['user']['nickname'] }}</span>
              </v-sheet>
              <v-spacer/>
              <v-sheet class="d-flex flex-row justify-space-between align-center" color="transparent">
                <v-btn v-show="isHovering" class="mx-auto rounded-xl"
                       size="small"
                       :style="{ backgroundImage: 'linear-gradient(to right, #17C1E8, #425BD3)' }"
                       style="transition: width 1s ease-in-out;position: fixed;bottom:20px;right:10%;" elevation="12" width="80%" prepend-icon="mdi-draw-pen"
                       @click="navigateTo(`/draw/${data['name']}/${data['user']['_id']}`)">
                  一键使用
                </v-btn>
              </v-sheet>
            </div>

          </v-expand-transition>
        </div>
        <v-img
            v-else
            :aspect-ratio="3/4"
            :src="data[srcLabel]"
            cover
            :style="isHovering ? 'transform: scale(1.05);' : 'transform: scale(1);'"
            style="transition: transform 0.3s ease-in-out;"
        >
          <v-expand-transition>
            <div
                class="transition-fast-in-fast-out bg-white-darken-2 v-card--reveal"
                :class="mdAndUp?'rounded-lg':'rounded'"
                style="z-index: 999;transition: all 0.2s ease-in-out;"
                :style="isHovering ? 'height: 40%' : 'height: 25%'"
            >
              <!--              应用标题-->
              <v-sheet color="transparent">
                <span class="text-caption text-white font-weight-bold  text-left ma-4">{{ data["title"] }}</span>
                <v-divider/>
                <span class="text-caption font-weight-light text-white  text-left ma-4 overflow-hidden">{{ data["description"] }}</span>
                <v-spacer/>
              </v-sheet>
              <v-sheet class="d-flex flex-row justify-space-start align-center" color="transparent"
                       style="width: 100%;">
                <!--              头像-->
                <v-avatar
                    color="white"
                    class="mb-2 ml-4 mt-2"
                    size="30"
                >
                  <v-img :src="data['user'][avatarLabel] || defaultAvatar"></v-img>
                </v-avatar>
                <!--              姓名-->
                <span class="text-caption text-grey font-weight-bold ml-2">{{ data['user']['nickname'] }}</span>
              </v-sheet>
              <v-spacer/>
              <v-sheet class="d-flex flex-row justify-space-between align-center" color="transparent">
                <v-btn v-show="isHovering" class="mx-auto rounded-xl"
                       size="small"
                       :style="{ backgroundImage: 'linear-gradient(to right, #17C1E8, #425BD3)' }"
                       style="transition: width 1s ease-in-out;position: fixed;bottom:20px;right:10%;" elevation="12" width="80%" prepend-icon="mdi-draw-pen"
                @click="navigateTo(`/draw/${data['name']}/${data['user']['_id']}`)">
                  一键使用
                </v-btn>
              </v-sheet>


            </div>

          </v-expand-transition>
        </v-img>

        <!--        <v-card-text class="pt-6">-->
        <!--          <div class="font-weight-light text-grey text-h6 mb-2">-->
        <!--            For the perfect meal-->
        <!--          </div>-->

        <!--          <h3 class="text-h4 font-weight-light text-orange mb-2">-->
        <!--            QW cooking utensils-->
        <!--          </h3>-->

        <!--          <div class="font-weight-light text-h6 mb-2">-->
        <!--            Our Vintage kitchen utensils delight any chef.<br>-->
        <!--            Made of bamboo by hand-->
        <!--          </div>-->
        <!--        </v-card-text>-->
      </v-card>
    </v-hover>
  </div>
</template>
<style>
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  position: absolute;
  width: 100%;
  backdrop-filter: blur(20px);
}

.v-sheet--reveal {
  background-color: rgba(255, 0, 0, 0.5);
  opacity: 0.9;
  backdrop-filter: blur(20px);
}
.overflow-hidden {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
